<template>
  <tabbar>

    <tabbaritem path="/home" dtColor="black" dtFontw="bold">
      <img slot="item-icon" src="~assets/images/tabbar/home.png" alt="未选中图标"/>
      <img slot="item-icon-active" src="~assets/images/tabbar/home-active.png" alt="选中图标"/>
      <div slot="item-text">首页</div>
    </tabbaritem>

    <tabbaritem path="/category" dtColor="black" dtFontw="bold">
      <img slot="item-icon" src="~assets/images/tabbar/modular.png" alt="未选中图标" />
      <img slot="item-icon-active" src="~assets/images/tabbar/modular-active.png" alt="选中图标" />
      <div slot="item-text">分类</div>
    </tabbaritem>

    <tabbaritem path="/cart" dtColor="black" dtFontw="bold">
     <img slot="item-icon" src="~assets/images/tabbar/shoppingcart.png" alt="未选中图标"  />
      <img slot="item-icon-active" src="~assets/images/tabbar/shoppingcart-active.png" alt="选中图标" />
      <div slot="item-text">购物车</div>
    </tabbaritem>

    <tabbaritem path="/profile" dtColor="black" dtFontw="bold">
      <img slot="item-icon" src="~assets/images/tabbar/user.png" alt="未选中图标" />
      <img slot="item-icon-active" src="~assets/images/tabbar/user-active.png" alt="选中图标" />
      <div slot="item-text">我的</div>
    </tabbaritem>

  </tabbar>
</template>

<script>
import tabbar from "components/common/tabbar/TabBar";
import tabbaritem from "components/common/tabbar/TabBarItem";
export default {
  name: "MainTabBar",
  components: {
    tabbar,
    tabbaritem
  },
};
</script>

<style>
</style>